// -----------------------引头部-----------------------------

$('#header').load('../html/head.html')

// -----------------------ajax数据-----------------------------
var list = '../server/list1.php'
let oPage = document.querySelector('.pageBox')

start(list, $('.zGoodn').get(0))


$('.zSort').click(
    function() {
        $(this).addClass('zOrange')
            .siblings().removeClass('zOrange').removeClass('zOranup')

        let index = $(this).index()

        $(this).parent('#zSort').siblings('.zGoodn')
            .eq(index).addClass('zGoody')
            .siblings().removeClass('zGoody')
        var list = '../server/list' + (index + 1) + '.php'
        start(list, $('.zGoodn').get(index))
        localStorage.setItem('pagenum', 1)
    }

)
$(".zSort").click(function() {
    $('.zOrange').toggleClass("zOranup")
});

// var list2 = '../server/list3.php'
// start(list2, $('.zGoodn').get(2))

// 存总条数\
function start(list, box) {

    let total = 0
        // ajax是异步
    if (localStorage.getItem('pagenum') === null) {
        pageAjax(1)
    } else {
        // console.log(localStorage.getItem('pagenum'))
        pageAjax(localStorage.getItem('pagenum') - 0)
    }

    function pageAjax(n) {
        pAjax({
            url: list,
            data: {
                pagenum: n,
                pagesize: 20
            }
        }).then(function(res) {
            // 解析数据
            let json = JSON.parse(res)
                // console.log(json)

            // 存总条数，给分页使用
            total = json.total
            var oZcounts = document.querySelector('.zCounts')
            oZcounts.innerHTML = total
            var oZpage = document.querySelector('.zPage i')
            oZpage.innerHTML = Math.ceil(total / 20)

            // 先清空后渲染
            box.innerHTML = ''

            // 循环渲染页面
            json.data.forEach(function(ele, index) {

                let str = `<div class="zGood" data-id="${ele.id}">
                            <div class="zBq">
                                <span class="zJp">精品</span>
                                <span class="zXp">新品</span>
                                <span class="zRm">热卖</span>
                            </div>
                            <div class="zGimg">
                                <div class="zGimgs zGimg1">
                                    <img data-id="${ele.id}" src="${ele.img1}" alt="...">
                                </div>
                                <div class="zGimgs">
                                    <img data-id="${ele.id}" src="${ele.img2}" alt="...">
                                </div>
                            </div>
                            <div class="zGname">
                                <a href="">${ele.title}</a>
                            </div>
                            <div class="zGprice">
                                <em>￥${ele.price}</em>
                                <del>￥${ele.price}</del>
                            </div>
                            <div class="zGsale">
                                销量<i>${ele.xiao}</i>笔 丨 <b>${ele.ping}</b>人评价
                            </div>
                            <div class="zGsmimg">
                                <div class="zGsmimgs">
                                    <img data-id="${ele.id}" src="${ele.img1}" alt="...">
                                </div>
                                <div class="zGsmimgs">
                                    <img data-id="${ele.id}" src="${ele.img2}" alt="...">
                                </div>
                            </div>
                        </div>`

                box.innerHTML += str

                $('.zGsmimgs').hover(function() {

                    var index = $(this).index()
                    $(this).parent().siblings('.zGimg').find('.zGimgs').eq(index).addClass('zGimg1').siblings().removeClass('zGimg1')
                }, function() {})

            })

        })
    }
    setTimeout(() => {
        window.onscroll = function() {
            var top = document.documentElement.scrollTop
            var clientH = document.documentElement.clientHeight
            $.each($(".zGood"), function(index, ele) {

                if ($(document).scrollTop() + $(window).height() >= $(ele).offset().top) {
                    $(ele).addClass('zDanchu')
                }
            })
        }
    }, 200);


    // 分页
    setTimeout(function() {
        oPage.innerHTML = ''
        $('.pageBox').html(`<div class="zTotal">总计<i>${total}</i>个记录</div>`)
    }, 100)

    // 异步
    setTimeout(function() {
        // console.log(localStorage.getItem('pagenum') - 0)
        new Pagination(oPage, {
            // 页码信息
            pageInfo: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1, // 当前在第几页
                pagesize: 20, // 一页多少条数据
                total: total, // 总条数
                totalpage: Math.ceil(total / 20), // 总页数
            },
            // 文字信息
            textInfo: {
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '最末页'
            },
            change(n) {
                var oZpagespan = document.querySelector('.zPage span')
                oZpagespan.innerHTML = n
                    // 本次存储
                localStorage.setItem('pagenum', n)
                pageAjax(n)
            }
        })
    }, 200)


    let arr = []
    box.addEventListener('click', function(ev) {
        // 查看详情
        if (ev.target.tagName === 'IMG' || ev.target.className === 'btn btn-primary') {
            let id = ev.target.getAttribute('data-id')
            window.location.href = 'detail.html?id=' + id

            localStorage.setItem('detailId', id)

        }
    })

}

// 事件委托
/* oList.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'IMG' || ev.target.className === 'btn btn-primary') {
        window.location.href = 'list.html'
        let id = ev.target.getAttribute('data-id')

        localStorage.setItem('detailId', id)
    }
}) */


// -----------------------懒加载-----------------------------

var aImg = document.querySelectorAll('img')

var clientH = document.documentElement.clientHeight


aImg.forEach((ele) => {
    if (clientH >= ele.offsetTop) {
        ele.src = ele.getAttribute('_src')
    }
})

window.onscroll = function() {
    var top = document.documentElement.scrollTop
    var clientH = document.documentElement.clientHeight

    aImg.forEach((ele) => {
        if (top + clientH >= ele.offsetTop) {
            ele.src = ele.getAttribute('_src')
        }
    })
}


// -----------------------轮播-----------------------------

var oZlong = document.querySelector('.zLong')
var aBlingbling = document.querySelectorAll('.zDian')

var iNow = 0

function next() {
    iNow++
    if (iNow === 2) {
        iNow = 0
    }
    oZlong.style.left = -iNow * 1226 + 'px'
    for (var i = 0; i < aBlingbling.length; i++) {
        aBlingbling[i].className = 'zDian'
    }
    aBlingbling[iNow].className = 'zDian zYuan'
}

function prev() {
    iNow--

    if (iNow === -1) {
        iNow = 1
    }
    oZlong.style.left = -iNow * 1226 + 'px'
    for (var i = 0; i < aBlingbling.length; i++) {
        aBlingbling[i].className = 'zDian'
    }
    aBlingbling[iNow].className = 'zDian zYuan'
}

aBlingbling.forEach(function(ele, index) {
    ele.addEventListener('mouseenter', function() {
        iNow = index

        oZlong.style.left = -iNow * 1226 + 'px'
        for (var i = 0; i < aBlingbling.length; i++) {
            aBlingbling[i].className = 'zDian'
        }
        aBlingbling[iNow].className = 'zDian zYuan'
    })
})

// -----------------------模拟数据-----------------------------

var aZsmall = document.querySelectorAll('.zSmall')
var aZsimg = document.querySelectorAll('.zSimg')
var aZsname = document.querySelectorAll('.zSname')
var aZprice = document.querySelectorAll('.zPrice')
var aZeval = document.querySelectorAll('.zEval')

var arrSmall = [{
    imgSrc: '../images/1568_thumb_G_1592377355487.jpg',
    txt: '珍视明四味珍层冰硼眼药水15ml ',
    pri: '￥28.3',
    pin: '0人评价'
}, {
    imgSrc: '../images/1712_thumb_G_1592374539669.jpg',
    txt: '广誉远 定坤丹水蜜丸7g*4瓶  ',
    pri: '￥198',
    pin: '2人评价'
}, {
    imgSrc: '../images/2168_thumb_G_1592375578290.jpg',
    txt: '双吉 红霉素眼膏2.5g  ',
    pri: '￥5.8',
    pin: '1人评价'
}, {
    imgSrc: '../images/1568_thumb_G_1592377355487.jpg',
    txt: '珍视明四味珍层冰硼眼药水15ml ',
    pri: '￥28.3',
    pin: '0人评价'
}, {
    imgSrc: '../images/1712_thumb_G_1592374539669.jpg',
    txt: '广誉远 定坤丹水蜜丸7g*4瓶  ',
    pri: '￥198',
    pin: '2人评价'
}, {
    imgSrc: '../images/2168_thumb_G_1592375578290.jpg',
    txt: '双吉 红霉素眼膏2.5g  ',
    pri: '￥5.8',
    pin: '1人评价'
}, {
    imgSrc: '../images/1568_thumb_G_1592377355487.jpg',
    txt: '珍视明四味珍层冰硼眼药水15ml ',
    pri: '￥28.3',
    pin: '0人评价'
}, {
    imgSrc: '../images/1712_thumb_G_1592374539669.jpg',
    txt: '广誉远 定坤丹水蜜丸7g*4瓶  ',
    pri: '￥198',
    pin: '2人评价'
}, {
    imgSrc: '../images/2168_thumb_G_1592375578290.jpg',
    txt: '双吉 红霉素眼膏2.5g  ',
    pri: '￥5.8',
    pin: '1人评价'
}, {
    imgSrc: '../images/1568_thumb_G_1592377355487.jpg',
    txt: '珍视明四味珍层冰硼眼药水15ml ',
    pri: '￥28.3',
    pin: '0人评价'
}]

arrSmall.forEach(function(ele, index) {
    aZsmall[index].innerHTML = `<div class="zSimg">
    <img src="${ele.imgSrc}" alt=""></div>
    <div class="zSname">${ele.txt}</div>
    <div class="zPrice">${ele.pri}</div>
    <div class="zEval">${ele.pin}</div>`
})



// -----------------------引尾部-----------------------------

$('#footer').load('../html/foot.html')


// -----------------------引购物车-----------------------------

$('#shopcar').load('../html/car1.html')